<template>
  <div class="main" ondragstart="return false;">
    <div class="bg"></div>
    <div class="but out" @click="out" title="关闭">
      <img src="../../assets/html/out.png" alt="" />
    </div>
    <div class="editUser">
      <el-button v-if="iseditUser" @click="outeditUser" type="text"
        >取消</el-button
      >
      <el-button @click="editUser" type="text">{{
        iseditUser ? "保存信息" : "编辑信息"
      }}</el-button>
    </div>
    <div class="content">
      <div class="img">
        <img class="imgs" :src="data.img" alt="" />
      </div>

      <div class="line">
        <i class="el-icon-user"></i>
        <span class="title">账号</span>
        <span>{{ data.uuid }}</span>
      </div>
      <div class="line">
        <i class="el-icon-chat-round"></i>
        <span class="title">昵称</span>
        <span v-if="!iseditUser">{{ data.name }}</span>
        <span v-else class="vals"
          ><el-input
            v-model="data.name"
            size="mini"
            maxlength="16"
            placeholder="请输入内容"
          ></el-input
        ></span>
      </div>
      <div class="line">
        <i class="el-icon-chat-round"></i>
        <span class="title">性别</span>
        <span v-if="!iseditUser">{{
          !data.sex || data.sex == "" ? "未设置" : data.sex
        }}</span>
        <span v-else class="vals">
          <el-radio v-model="data.sex" label="男">男</el-radio>
          <el-radio v-model="data.sex" label="女">女</el-radio>
        </span>
      </div>
      <div class="line">
        <i class="el-icon-message"></i>
        <span class="title">邮箱</span>
        <span v-if="!iseditUser">{{ data.email }}</span>
        <span v-else class="vals"
          ><el-input
            v-model="data.email"
            size="mini"
            placeholder="请输入内容"
          ></el-input
        ></span>
      </div>
      <div class="line">
        <i class="el-icon-mobile-phone"></i>
        <span class="title">手机号</span>
        <span v-if="!iseditUser">{{
          !data.phone || data.phone == "" ? "未设置" : data.phone
        }}</span>
        <span v-else class="vals"
          ><el-input
            v-model="data.phone"
            oninput="value=value.replace(/[^\d]/g,'')"
            size="mini"
            maxlength="11"
            placeholder="请输入内容"
          ></el-input
        ></span>
      </div>
      <div class="line">
        <i class="el-icon-location-information"></i>
        <span class="title">所在地</span>
        <span v-if="!iseditUser">{{ data.area }}</span>
        <span v-else class="vals"
          ><el-input
            v-model="data.area"
            size="mini"
            maxlength="48"
            placeholder="请输入内容"
          ></el-input
        ></span>
      </div>
      <div class="line">
        <i class="el-icon-orange"></i>
        <span class="title">职业</span>
        <span v-if="!iseditUser">{{
          !data.vocational || data.vocational == "" ? "未设置" : data.vocational
        }}</span>
        <span v-else class="vals"
          ><el-input
            v-model="data.vocational"
            size="mini"
            placeholder="请输入内容"
            maxlength="32"
          ></el-input
        ></span>
      </div>
      <div class="line">
        <i class="el-icon-chat-dot-square"></i>
        <span class="title">签名</span>
        <span v-if="!iseditUser">{{
          !data.motto || data.motto == "" ? "未设置" : data.motto
        }}</span>
        <span v-else class="vals"
          ><el-input
            type="textarea"
            v-model="data.motto"
            size="mini"
            maxlength="200"
            rows="4"
            show-word-limit
            placeholder="请输入内容"
          ></el-input
        ></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: JSON.parse(localStorage.getItem("userObj")),
      iseditUser: false,
    };
  },
  mounted() {
    this.ipc.send("message", { type: "window-show", id: "userDatail" });
  },
  methods: {
    outeditUser() {
      this.data = JSON.parse(localStorage.getItem("userObj"));
      this.iseditUser = false;
    },
    editUser() {
      if (!this.iseditUser) {
        this.iseditUser = true;
      } else {
        if (this.data.name == "") return this.err("请输入昵称");
        if (!this.data.sex || this.data.sex == "")
          return this.err("请选择性别");
        if (this.data.email == "") return this.err("请输入邮箱账号！");
        let isEmail = (e) => {
          return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
            e
          );
        };
        if (!isEmail(this.data.email)) {
          return this.err("请输入正确的邮箱账号！");
        }
        if (this.data.phone == "") return this.err("请输入手机号！");
        if (this.data.area == "") return this.err("请输入所在地！");
        if (this.data.vocational == "") return this.err("请输入职业！");
        this.post("/lt/editUser", this.data).then((res) => {
          if (res.code == "200") {
            this.ok("修改成功！");
            this.iseditUser = false;
            localStorage.setItem("userObj", JSON.stringify(this.data));
            this.ipc.send("message", { type: "getUserData", data: this.data });
          } else {
            this.err("修改失败！");
          }
        });
      }
    },
    out() {
      this.ipc.send("message", { type: "out", id: this.urlParam("id") });
    },
  },
};
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.main {
  width: 100%;
  height: 100%;
  -webkit-app-region: drag;
  position: relative;
  > .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url("../../assets/img/login.png");
    opacity: 0.6;
  }
  > .editUser {
    position: absolute;
    -webkit-app-region: none;
    right: 20px;
    top: 40px;
    cursor: pointer;
  }
  > .but {
    position: absolute;
    width: 32px;
    height: 32px;
    // background: rgba(255, 255, 255, 0.1);
    -webkit-app-region: none;
    padding: 4px;
    > img {
      width: 16px;
      height: 16px;
      position: absolute;
      top: calc(50% - 8px);
      left: calc(50% - 8px);
    }
    &.out {
      top: 0;
      cursor: pointer;
      right: 0;

      &:hover {
        background: rgba(240, 23, 23, 0.856);
      }
    }
  }
  > .content {
    height: 100%;
    width: 100%;
    padding: 16px;
    padding-top: 30px;
    color: #333333;
    > .img {
      width: 100%;
      height: 80px;
      //   text-align: center;
      > .imgs {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 1px #eaeaea solid;
        -webkit-app-region: none;
        cursor: pointer;
        &:hover {
          border: 1px #0578fc solid;
        }
      }
    }
    > .line {
      width: 100%;
      min-height: 24px;
      line-height: 24px;
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      > i {
        width: 24px;
        height: 100%;
        font-size: 24px;
        margin-right: 8px;
      }
      > .title {
        width: 55px;
      }
      > .vals {
        width: calc(100% - 55px);
        -webkit-app-region: none;
      }
    }
  }
}
</style>